<template>
  <!-- 客户数据页面 -->
  <el-row :gutter="20">
    <el-col :span="8">
      <div class="grid-content ep-bg-purple">
        <div>
          <span>浏览数</span>
          <span>{{ lookNum }}</span>
        </div>
        <img
          src="../../../assets/images/04客户数据_slices/icon007.png"
          alt=""
        />
        <div>
          <span>评论人数</span>
          <span>{{ commentNum }}</span>
        </div>
        <img
          src="../../../assets/images/04客户数据_slices/icon008.png"
          alt=""
        />
      </div>
    </el-col>
    <el-col :span="4">
      <div class="grid-content ep-bg-purple">
        <div>
          <span>注册人数</span>
          <span>{{ registerNum }}</span>
        </div>
        <img
          src="../../../assets/images/04客户数据_slices/icon009.png"
          alt=""
        />
      </div>
    </el-col>
    <el-col :span="4">
      <div class="grid-content ep-bg-purple">
        <div>
          <span>下单人数</span>
          <span>{{ buyNum }}</span>
        </div>
        <img
          src="../../../assets/images/04客户数据_slices/icon010.png"
          alt=""
        />
      </div>
    </el-col>
    <el-col :span="4">
      <div class="grid-content ep-bg-purple">
        <div>
          <span>关注人数</span>
          <span>{{ focusNum }}</span>
        </div>
        <img
          src="../../../assets/images/04客户数据_slices/icon011.png"
          alt=""
        />
      </div>
    </el-col>
    <el-col :span="4">
      <div class="grid-content ep-bg-purple">
        <div>
          <span>点赞人数</span>
          <span>{{ goodNum }}</span>
        </div>
        <img
          src="../../../assets/images/04客户数据_slices/icon012.png"
          alt=""
        />
      </div>
    </el-col>
  </el-row>
  <div class="ranking">
    <span class="title">成交排行</span>

    <!-- 选择器 -->
    <div class="select">
      <!-- 地区选择 -->
      <div class="area">
        <span>地区</span>
        <el-select v-model="value1" class="m-2" placeholder="省">
          <el-option
            v-for="item in option1"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
        <el-select v-model="value2" class="m-2" placeholder="市">
          <el-option
            v-for="item in option2"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
        <el-select v-model="value3" class="m-2" placeholder="区">
          <el-option
            v-for="item in option3"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </div>

      <!-- 时间选择 -->
      <div class="time">
        <span>时间</span>
        <el-date-picker
          v-model="time1"
          type="daterange"
          range-separator="To"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
        />
      </div>

      <!-- 查询按钮 -->
      <div class="btn">
        <el-button @click="query">查询</el-button>
        <el-button @click="reset">重置</el-button>
      </div>
    </div>

    <!-- 表格 -->
    <el-table
      :data="rankingData"
      stripe
      style="width: 100%"
      class="rankingTable"
    >
      <el-table-column prop="id" label="序号" />
      <el-table-column prop="name" label="用户名" />
      <el-table-column prop="money" label="成交金额" />
      <el-table-column prop="area" label="地区" />
      <el-table-column prop="time" label="下单时间" width="120" />
    </el-table>
    <!-- 分页 -->
    <div class="demo-pagination-block rankingPage">
      <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[10, 15, 20, 25]"
        :small="small"
        :disabled="disabled"
        :background="background"
        layout=" prev, pager, next,sizes, jumper"
        :total="pageTotal"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, onMounted, computed } from "vue";
import { useStore } from "vuex";
export default defineComponent({
  setup() {
    const store = useStore();
    onMounted(() => {
      store.dispatch("customerdata/getcustomerAsync");
    });
    // 统计人数
    const lookNum = ref(125);
    const commentNum = ref(985);
    const registerNum = ref(1542);
    const buyNum = ref(69);
    const focusNum = ref(2485);
    const goodNum = ref(6789);

    // 地区选择器
    const value1 = ref("");
    const option1 = [
      {
        value: "浙江",
        label: "浙江",
      },
      {
        value: "福建",
        label: "福建",
      },
    ];
    const value2 = ref("");
    const option2 = [
      {
        value: "杭州",
        label: "杭州",
      },
      {
        value: "温州",
        label: "温州",
      },
    ];
    const value3 = ref("");
    const option3 = [
      {
        value: "上城",
        label: "上城",
      },
      {
        value: "滨江",
        label: "滨江",
      },
    ];
    // 最终地区

    //时间选择器
    const time1 = ref("");

    // 表格
    const rankingData = computed(() => store.state.customerdata.customerList);

    //查询
    const query = () => {
      const areaValue = value1.value + value2.value + value3.value;
      let obj: any = {
        area: areaValue,
        time: time1,
      };

      return store.commit("customerdata/checkcustomer", obj);
    };
    //重置
    const reset = () => {
      value1.value = "";
      value2.value = "";
      value3.value = "";
      time1.value = "";
      store.dispatch("customerdata/getcustomerAsync");
    };

    //分页

    const currentPage = computed(() => store.state.customerdata.currentPage);
    const pageSize = computed(() => store.state.customerdata.pageSize);
    const small = ref(false);
    const background = ref(false);
    const disabled = ref(false);
    const pageTotal = computed(() => store.state.customerdata.pageTotal);
    //当前页面数据量
    const handleSizeChange = (val: number) => {
      console.log(`${val} 条数据`);
      return store.commit("customerdata/pageSizeChange", val);
    };

    // 当前页数改变
    const handleCurrentChange = (val: number) => {
      console.log(`当前页: ${val}`);
      return store.commit("customerdata/pageCurrentChange", val);
    };

    return {
      value1,
      option1,
      value2,
      option2,
      value3,
      option3,
      rankingData,

      time1,
      //查询
      query,
      reset,
      //分页
      pageTotal,
      currentPage,
      pageSize,
      small,
      background,
      disabled,
      handleSizeChange,
      handleCurrentChange,
      //人数统计
      lookNum,
      commentNum,
      registerNum,
      buyNum,
      focusNum,
      goodNum,
    };
  },
});
</script>

<style lang="less" scoped>
.el-row {
  margin-bottom: 20px;
  // min-width: 1400px;
  width: 100%;
}
.el-row:last-child {
  margin-bottom: 0;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
/deep/.is-guttered {
  background-color: rgb(245, 245, 245);
  .grid-content {
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 120px;
    border-radius: 30px;
    padding: 18px 29px;
    div {
      display: flex;
      flex-direction: column;
      &:nth-of-type(2) {
        margin-left: 20px;
      }

      span {
        font-size: 20px;
        min-width: 85px;
        min-height: 30px;
        font-weight: 400;
        color: #333333;
        &:nth-child(2) {
          font-size: 35px;
          margin-top: 9px;
        }
      }
    }
    img {
      width: 74px;
      margin-left: 15px;
      // margin-right: 10px;
    }
  }
}

.ranking {
  border-radius: 20px;
  width: 100%;
  background-color: #fff;
  padding: 15px 30px;
  color: #333333;
  .title {
    font-size: 22px;
  }
  .select {
    display: flex;
    justify-content: space-between;
    margin-top: 19px;
    margin-bottom: 16px;
    font-size: 18px;
    span,
    .m-2 {
      margin-right: 15px;
    }
    & > div {
      flex: 1;
      &:nth-child(2) {
        display: flex;
        justify-content: center;
        align-items: center;
      }
      &:last-child {
        display: flex;
        justify-content: flex-end;
      }
    }
    .m-2 {
      width: 75px;
    }
  }
  .rankingTable {
    /deep/.el-table__header-wrapper .el-table__cell {
      background: #fff0ee;
      font-size: 18px;
      color: #666;
      height: 40px;
    }
  }
  .rankingPage {
    margin: 40px 0 60px;
    display: flex;
    justify-content: center;
    width: 100%;
  }
}
.el-button:hover {
  background: #ffa79c;
  color: #fff;
  border: 1px solid #ffa79c;
}
.el-button:focus {
  background: #ffa79c;
  color: #fff;
  border: 1px solid #ffa79c;
}
</style>
